<template>
  <div class="a">
    <el-col :span="14" offset="5">
<!--      <dv-loading v-if="loading">Loading...</dv-loading>-->
      <el-row></el-row>
      <el-row>
        <h1 align="center" style="color: white">模型预测</h1>
        <dv-decoration-5 class="line" dur="3" style="width:400px;height:30px"/>
      </el-row>

      <dv-border-box-12>
        <div style="background: rgba(0,0,0,0);">
          <el-row class="up" :gutter="20">
            <el-row>
              <el-col>
                <h2 align="center" style="color: white; margin-top: 22px;">设置条件参数</h2>
              </el-col>
            </el-row>

            <el-col :span="20" :offset="1">
              <el-row :gutter="20">
                <el-form ref="form" :model="form" label-width="auto">

                  <template>
                    <el-select v-model="form.modelName" placeholder="请选择模型">
                      <el-option
                          v-for="item in options"
                          :key="item.modelName"
                          :label="item.label"
                          :value="item.modelName">
                      </el-option>
                    </el-select>
                  </template>

                  <template>
                    <el-select v-model="form.predictionObject" placeholder="请选择预测类型">
                      <el-option
                          v-for="item in options1"
                          :key="item.predictionObject"
                          :label="item.label"
                          :value="item.predictionObject">
                      </el-option>
                    </el-select>
                  </template>

                </el-form>
              </el-row>

              <!--                    <el-row> </el-row>-->

              <el-row :gutter="6">
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" :offset="0" v-model="form.data[0]">
                    <template slot="prepend">数值1</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[1]">
                    <template slot="prepend">数值2</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[2]">
                    <template slot="prepend">数值3</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[3]">
                    <template slot="prepend">数值4</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[4]">
                    <template slot="prepend">数值5</template>
                  </el-input>
                </div></el-col>
              </el-row>

              <el-row :gutter="6">
                <el-col :span="4" :offset="0"><div>
                  <el-input placeholder="请输入" v-model="form.data[5]">
                    <template slot="prepend">数值6</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[6]">
                    <template slot="prepend">数值7</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[7]">
                    <template slot="prepend">数值8</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[8]">
                    <template slot="prepend">数值9</template>
                  </el-input>
                </div></el-col>
                <el-col :span="4"><div>
                  <el-input placeholder="请输入" v-model="form.data[9]">
                    <template slot="prepend">数值10</template>
                  </el-input>
                </div></el-col>
              </el-row>

              <el-row :gutter="6">
                <el-col :span="5" :offset="0"><div>
                  <el-input placeholder="请输入" v-model="form.data[10]">
                    <template slot="prepend">数值11</template>
                  </el-input>
                </div></el-col>
                <el-col :span="5"><div>
                  <el-input placeholder="请输入" v-model="form.data[11]">
                    <template slot="prepend">数值12</template>
                  </el-input>
                </div></el-col>
                <el-col :span="5"><div>
                  <el-input placeholder="请输入" v-model="form.data[12]">
                    <template slot="prepend">数值13</template>
                  </el-input>
                </div></el-col>
                <el-col :span="5"><div>
                  <el-input placeholder="请输入" v-model="form.data[13]">
                    <template slot="prepend">数值14</template>
                  </el-input>
                </div></el-col>
              </el-row>

            </el-col>


<!--//openFullScreen2;onSubmit-->
            <el-col :span="1">
              <el-button type="primary" @click="openFullScreen2();onSubmit()" style="width:100px;height: 300px">提交预测
              </el-button>
            </el-col>
          </el-row>
        </div>
      </dv-border-box-12>

      <el-row>
        <h5 align="center" style="color: white; margin-top: 50px">1.输入条件参数 -> 2.提交预测任务 -> 3.云端返回计算结果 </h5>
        <dv-decoration-2 class="line"   style="width:420px;height:5px;"/>
      </el-row>


      <dv-border-box-12>
        <div style="background: rgba(0,0,0,0);padding-bottom: 1px;">
          <el-row>
            <el-col>
              <h2 align="center" style="color: white; margin-top: 22px;">预测结果</h2>
            </el-col>
          </el-row>
          <el-row>

            <el-col :span="20" offset="2" align="center">
              <el-table class="b"
                        :show-header="false"
                        :data="tableData"
                        style="color:white; background-color:rgba(0,0,0,0);font-size: 19px">

                <el-table-column
                    prop="prop"
                    label="属性"
                    width="180">
                </el-table-column>

                <el-table-column
                    prop="name"
                    label="数值"
                    width="215">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </dv-border-box-12>

    </el-col>
  </div>
</template>

<script>
// import Charts from '@jiaminghi/charts'
export default {
  data() {
    return {
      fullscreenLoading: false,
      loading: true,
      options: [{
        modelName: "decisionTreeRegressor",
        label: '决策树回归'
      }, {
        modelName: 'KNNRegression',
        label: 'K最近邻回归'
      }, {
        modelName: 'lassoRegression',
        label: '套索回归'
      }, {
        modelName: 'MLPRegression',
        label: '多层感知机回归'
      }, {
        modelName: 'multipleLinearRegression',
        label: '多元线性回归'
      }, {
        modelName: 'ridgeRegression',
        label: '岭回归'
      }, {
        modelName: 'SVR',
        label: '支持向量机回归'
      }, {
        modelName: 'EL_stacking',
        label: '堆栈式多特征融合集成学习模型'
      }
      ],
      modelName: '',

      options1: [{
        predictionObject: "yieldRate",
        label: '成材率'
      }, {
        predictionObject: 'ingotRate',
        label: '成锭率'
      }
      ],
      predictionObject: '',

      form:{
        "modelName": null,
        "predictionObject": null,
        "data": []
        //1,1,1,1,1
        //1.2,1,1,5.55,22,1.2,1,1,5.55,22,1.2,1,1,5.55
      },
      prop:{
        aws: '-',
      },
    }
  },
  computed:{
    tableData(){
      return [
        {
          prop: '计算结果',
          name: this.prop.aws,
        }]
    }
  },
  name: 'Echarts',
  methods:{
    convert(){
      if(this.form.data.length<=5){
        this.form.data[0]=parseFloat(this.form.data[0])
        this.form.data[1]=parseFloat(this.form.data[1])
        this.form.data[2]=parseFloat(this.form.data[2])
        this.form.data[3]=parseFloat(this.form.data[3])
        this.form.data[4]=parseFloat(this.form.data[4])
      }else{
        this.form.data[0]=parseFloat(this.form.data[0])
        this.form.data[1]=parseFloat(this.form.data[1])
        this.form.data[2]=parseFloat(this.form.data[2])
        this.form.data[3]=parseFloat(this.form.data[3])
        this.form.data[4]=parseFloat(this.form.data[4])
        this.form.data[5]=parseFloat(this.form.data[5])
        this.form.data[6]=parseFloat(this.form.data[6])
        this.form.data[7]=parseFloat(this.form.data[7])
        this.form.data[8]=parseFloat(this.form.data[8])
        this.form.data[9]=parseFloat(this.form.data[9])
        this.form.data[10]=parseFloat(this.form.data[10])
        this.form.data[11]=parseFloat(this.form.data[11])
        this.form.data[12]=parseFloat(this.form.data[12])
        this.form.data[13]=parseFloat(this.form.data[13])
      }

    },
    // charet() {
    //     const container = document.getElementById('container')
    //     const myChart = new Charts(container)
    //     myChart.setOption(this.option)
    // },



  //   onSubmit() {
  //     this.$axios.post("http://121.36.106.217:9010/predict", {
  //           "modelName": "decisionTreeRegressor",
  //           "predictionObject": "yieldRate",
  //           "data": [1.2, 2.61, 5.654, 5.55, 1.679]
  //     }).then(function(res){  // {"no":1,"msg":"录入成功！","data":null}
  //       console.log(res.data)
  //
  //         // this.tableData[0].name = res.data.hd;
  //         this.prop.aws = res.data;  //硬度
  //         // this.prop = res.data
  //     }.bind(this));
  //     console.log('submit!')
  //   },
  // },

  onSubmit() {

    setTimeout(() => {
      // 这里就是处理的事件
      this.convert()
      this.$axios.post("http://121.36.106.217:9010/predict",this.form)
          .then(function(res){  // {"no":1,"msg":"录入成功！","data":null}
            console.log(res.data)
            console.log(this.form.data)
            this.prop.aws = res.data;
          }.bind(this));
      console.log('submit!')
      console.log(this.form.data)

    }, 2000);

  },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    }
    },

  mounted() {
  }

}
</script>

<style>
.element{
  width: 50px;
  height: 20px;
  border:1px solid;
  border-radius:3px;
  background: rgba(131, 185, 212, 0.87);
}

.el-row {
  margin-bottom: 50px;
}

div.a{
  width: 100%;
  height: 1000px;
  background: black;
}

div.Echarts{
  position:relative;
  top:10px;
}

.line {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.el-table tr,
.el-table td {
  background-color: transparent !important;
}
.el-table::before {
  height: 0px;
}

.el-row.up{
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.el-input-group__append, .el-input-group__prepend{
  background: #007dff33;
  color: white;
  border-color: #272727;
}

.el-input__inner{
  background: #000000;
  color: white;
  border-color: #272727;
}

</style>
